import React from "react";
import ReactDOM from "react-dom/client";
import { hook, useContext, useHighState } from "./hook/index";

const CouterContext = React.createContext(); // 创建一个上下文组件

function Counter() {
    const { number, setNumber } = useContext(CouterContext);
    // useContext(CouterContext)  =  context._currentValue 是等价的

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={() => setNumber(number + 1)}>增加</button>
        </div>
    );
}

function App() {
    const [number, setNumber] = useHighState(0);

    return (
        // Provider Consumer 提供数据的  消费数据的
        <CouterContext.Provider value={{ number, setNumber }}>
            {/* 实际上这里会处理为 context._currentValue = {number, setNumber} */}
            <Counter />
            <br />
            <button
                onClick={() => {
                    setNumber(number - 1);
                }}
            >
                减少
            </button>
        </CouterContext.Provider>
    );
}

const root = ReactDOM.createRoot(document.getElementById("root"));

export function render() {
    hook.index = 0; // 每次渲染都得重置指针从开头进行匹配, 不然进行 useState() 执行会在执行栈后面添加
    root.render(<App />);
}
render();
